<!-- 
Copyright (c) Guangzhou Data Control Network Technology Co., Ltd. All rights reserved. 
Licensed under the MIT License.
contact:dcdev_founder@foxmail.com 
-->

<!DOCTYPE html>
<html>

<head>
    <!------ 以下内容不要动 --------------------------------------------------------->
    <meta charset="UTF-8">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <!-- 数控开发基础样式库（已作一定的自适应，button/label/input/textarea等设置了默认样式） -->
    <link class="_dcdev_preset_" type="text/css" rel="stylesheet"
        href="https://res.dcdev.net/dcdev/v1.0.8/assets/css/dcdevui.css">
    <!-- 页面标题 -->
    <title>数控开发 · 页面配置</title> <!-- 桌面端浏览器及收藏夹图标 -->
    <link class="_dcdev_preset_" rel="icon" href="https://www.dcdev.net/icon.png" type="image/x-icon">
    <link class="_dcdev_preset_" rel="shortcut icon" href="https://www.dcdev.net/icon.png" type="image/x-icon">
    <link type="text/css" rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css">
    <!------ 以上内容不要动 --------------------------------------------------------->

    <style>
        html {
            height: 100%;
        }

        body {
            height: 100%;
        }

        @media screen and (max-width: 500px) {
            #edit_container {
                flex-direction: column;
            }

            #code_container {
                width: 100vw !important;
                height: 400px !important;
            }

            #preview_mobile {
                width: 95%;
            }
        }

        .dcdev-title {
            width: max-content !important;
        }

        @media screen and (max-width: 1100px) {
            #function_container {
                flex-direction: column;
            }

            #function_menu {
                min-width: auto !important;
            }
        }
    </style>
</head>

<body>
    <div id="component_list_container"></div>
    <!-- 全屏居中 -->
    <div id="_progress_"
        style="position:fixed;left: 0px;top:0px; width: 100%;height: 100%;background-color: white;z-index: 9998;">
        <div class="mask"></div>
        <div style="position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index: 9999;">
            <div id="progress">
                <el-progress type="circle" :percentage="progressNum"></el-progress>
            </div>
        </div>
    </div>
    <!-- 左边边距弹窗感应区域结束 -->
    <div style="display: flex;justify-content: flex-start;position: inherit;    overflow: hidden;">
        <div style="padding-top:10px;display: flex;flex-direction: column;width: 100%;cursor: pointer;">
            <div id="info"
                style="padding-left:10px;padding-right:10px;display: flex;flex-direction: row;width: 100%;align-items: center;">
                <div style="display: flex;flex-wrap: wrap;">
                    <div id="project_project_list" data-key="project">
                        <div
                            style="padding: 0px 10px;display: flex;flex-direction: row;width: 100%;justify-content: center;align-items: center;">
                            <img id="project_my_project_headimgurl"
                                style="width: 24px;height: 24px;border-radius: 25px;">
                            <div id="project_my_project_owner" style="font-size:12px;display: -webkit-inline-box;">
                            </div>
                            <div id="project_my_project_pid" style="float:right;"></div>
                            <hr>
                        </div>
                    </div>
                    <input id="page_name" style="width: 250px;" placeholder="用于描述这个页面的作用" />
                    <div id="file_menu"> </div>
                </div>

                <div style="margin-left:auto;align-items: center;display: flex;flex-direction: column;">
                    <div>
                        <img id="_dc_function_panel_headimgurl_" style="margin-left:0px;width:30px;border-radius:50%" />
                        <div id="_dc_function_panel_login_"
                            style="display: block;margin: 10px;font-size: 14px;color: gray;margin-top:10px;color: blue;">
                            登录
                        </div>
                    </div>
                    <div id="_dc_function_panel_logout_" style="display:none;color: lightgray;font-size: 12px;">注销
                    </div>
                </div>
            </div>
            <div id="select_container"></div>
            <div id="function_container" style="display: flex;justify-content: flex-start;"></div>
            <div id="edit_container" style="display: flex;">
                <div id="code_container" style="margin-right: -10px;width: calc(100% - 300px);"></div>
                <div id="preview_container" style="flex:1;"></div>
            </div>
        </div>
    </div>

    <div id="model"> </div>
    <div id="model_select_component"></div>
    <div id="model_location"> </div>
    <div id="model_left_auto"> </div>
    <div id="popup_container"></div>
    <div id="file_menu"></div>

</body>
<div style="display: none;" id="wx_share_popup"></div>
<div id="function_popups"></div>
<script class="_dcdev_preset_" src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script class="_dcdev_preset_" src="https://res.dcdev.net/dcdev/v1.0.8/assets/js/init.js" id="initClass"
    authorize_mode="none" console_mode=""></script>
<script class="_dcdev_preset_" src="https://res.dcdev.net/dcdev/v1.0.8/assets/js/ui.js" id="ui_class"
    xhr_show_loading=1></script>
</script>
<script src="https://www.layuicdn.com/layui/layui.js"></script>
<script src="https://res.dcdev.net/dcdev/v1.0.8/assets/js/render_somthing.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/blueimp-md5/2.13.0/js/md5.min.js"></script>
<script src="https://cdn.bootcss.com/cropper/4.0.0-beta/cropper.js"></script>
<script src="//cdn.bootcss.com/layer/3.0.1/layer.min.js"> </script>
    <link href="//cdn.bootcss.com/layer/3.0.1/skin/default/layer.css"  rel="stylesheet">
<link type="text/css" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/theme-chalk/index.css" rel="stylesheet">
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/index.js"></script>
<script>
    // 获取用户及项目信息
    if (localStorage["project_info"]) {
        project_info = JSON.parse(localStorage["project_info"]);
    } else {
        if (localStorage["own_pid"]) {
            project_info = {
                pid: localStorage["own_pid"]
            };
            localStorage["project_info"] = JSON.stringify(project_info);
        } else {
            project_info = {
                name: "",
                pid: "",
            }
        }
    }
    if (localStorage["user_info"]) {
        user_info = JSON.parse(localStorage["user_info"]);
    }
    $(`#project_project_list`).css("display", "flex");

    // 各弹出菜单容器
    $(`#popup_container`).load("popup_container.html")
    $(`#wx_share_popup`).load("wx_share_popup.html")
    $(`#function_popups`).load("function_popups.html")
    // 各子菜单
    $(`#file_menu`).load("page_file_menu.html")
    $(`#select_container`).load("framework_menu.html");
    $(`#function_container`).load("function_menu.html");
    $('#setting_component').load("setting_component.html");
    // 预览及代码
    $(`#code_container`).load("code.html");
    //.css("width", browser_info.width - 330);.css("width", browser_info.width - 330);
    $(`#preview_container`).load("preview_html.html");
</script>

<!-- 用户信息相关 -->
<script>
    // 读出localstage缓存中的用户信息(如果有)
    {
        if (url_params) {
            // 有回调参数
            if (url_params.dc_login_key && url_params.dc_login_data) {
                // 保存用户信息及初体验项目信息
                user_info = JSON.parse(getDAesString(url_params.dc_login_data, url_params.dc_login_key, url_params
                    .dc_login_key))
                localStorage["own_pid"] = user_info.own_pid;
                localStorage[`user_info`] = JSON.stringify(user_info);

                // 移除回调参数再重载入
                var cb = delUrlParam(location.href, "dc_login_key");
                cb = delUrlParam(cb, "dc_login_data");
                location.href = cb;
            }
            if (url_params.id) {
                var url =
                    "https://api.dcdev.net/v1.0.1/component/get_component_by_id.php";
                var data = {
                    "component_id": url_params.id,
                }
                $.ajax({
                    method: "post",
                    dataType: "json",
                    url: url,
                    data: {
                        params: JSON.stringify(data)
                    },
                    success: function (res) {
                        if (res.res) {
                            component_data = res.data;
                            $(`#page_name`).val(component_data.desc);
                            $(`#project_my_project_headimgurl`).attr("src", component_data.headimgurl);
                            $(`#project_my_project_owner`).html(component_data.nickname);
                            // 导入框架
                            madeImport(component_data.vendor.split(","));
                        }
                    }
                })
            }
        }

        try {
            pid = localStorage["own_pid"];
            user_info = JSON.parse(localStorage[`user_info`]);
        } catch (error) {

        }

        $(`#_dc_function_panel_login_`).click(function () {
            var key = md5(new Date().getTime());
            var data = getAesString(location.href, key, key)
            location.href =
                `https://www.dcdev.net/site/dcdev/0000000000000000/pages/function/login_to_wechat.html?key=${key}&data=${data}`;
        })

        $(`#_dc_function_panel_logout_`).click(function () {
            ui_class.show_confirm(`确定要注销当前用户？`, null,
                function (res) {
                    if (res.res) {
                        window.open(
                            "https://www.dcdev.net/site/dcdev/0000000000000000/pages/function/login_to_wechat.html?logout=1"
                        );
                        localStorage.clear();
                        location.reload();
                    }
                })
        })
        if (typeof (user_info) != "undefined") {
            if (user_info) {
                $("#_dc_function_panel_headimgurl_").attr("src", user_info.headimgurl);
                $("#_dc_function_panel_nickname").html(user_info.nickname);
                $("#_dc_function_panel_login_").css("display", "none");
                $("#_dc_function_panel_logout_").css("display", "block");
            }
        } else if (localStorage["u"]) {
            user_info = JSON.parse(getDAesString(localStorage["u"], localStorage["k"], localStorage[
                "k"]));
            // 更新头像
            $("#_dc_function_panel_headimgurl_").attr("src", user_info.headimgurl);
            $("#_dc_function_panel_nickname").html(user_info.nickname);
            $("#_dc_function_panel_login_").css("display", "none");
            $("#_dc_function_panel_logout_").css("display", "block");
        }
        // 未登录
        else {
            $("#_dc_function_panel_login_").css("display", "block");
        }
        // 没有页面id时添加默认地址
        if (!url_params.id) {
            $(`#project_my_project_headimgurl`).attr("src", user_info.headimgurl);
            $(`#page_name`).val("未命名页面");
        }
        // 设置是否页面配置的标志
        is_setting_page = true;
    }
</script>

<!-- 读出项目信息 -->
<script>
    if (url_params.key && url_params.data) {
        var data = getDAesString(url_params.data, url_params.key, url_params
            .key);
        project_info = JSON.parse(data);
        $(`#project_my_project_headimgurl`).attr("src", project_info.headimgurl);
        $(`#page_name`).val(project_info.page_desc);
    }
</script>

<script type="text/javascript">
    //组件初始化
    var progressMain = {
        data() {
            return {
                progressNum: 0, //设置值
            }
        },
        methods: {
            startProgress() {
                this.startTimer = setInterval(() => {
                    this.progressNum += 10;
                    if (this.progressNum > 99) {
                        clearInterval(this.startTimer)
                    }
                }, 200);
            },

        },
        mounted() { //钩子函数
            this.startProgress();

        }
    }
    var Ctor = Vue.extend(progressMain);
    new Ctor().$mount('#progress');
</script>